<template>
  <div>
    <!-- 1.最基础方法 直接引用 -->
    <!-- <h1>store中的count:{{ $store.state.count }}</h1> -->

    <h1>store中的count:{{ count }}</h1>
    <h1>count的平方{{ countSqrt }}</h1>
    <h1>store中的num:{{ num }}</h1>
    <!-- mutation -->
    <!--  方法一：直接在插值中使用`$store.commit(type,payload) ` -->
    <!-- <button @click="$store.commit('increase')">+1</button> -->
    <!-- 方法二：在 methods 中封装函数,函数中写`$store.commit(type,payload) ` -->
    <!-- <button @click="increaseFn">+1</button> -->
    <!-- 方法三： -->
    <button @click="increaseN({ n: 20 })">+n</button>
    <button @click="increase">+1</button>

    <!-- action -->
    <button @click="$store.dispatch('increaseWait')">过一秒+1</button>

    <button @click="increaseWait">过一秒+1</button>
    <button @click="increaseNWait({ n: 20 })">过一秒+N</button>

    <!-- getter -->
  </div>
</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
  export default {
    name: "Item",
    mounted() {
      console.log(mapActions(["increase"]));
      let re = mapActions(["increase"]);
      console.log(re);
      console.log(this);
    },

    computed: {
      ...mapState({ count: "count", num: "num" }),
      //   写在计算属性里
      ...mapGetters(["countSqrt"]),
    },
    methods: {
      ...mapMutations(["increase", "increaseN"]),

      ...mapActions(["increaseWait", "increaseNWait"]),
    },
  };
</script>

<style></style>
